<template>
    <!-- 组件模板 -->
    <div class="news">
        <!-- <h1>
            新闻标题
            <br>
            <span>
                这是新闻组件
            </span>
        </h1> -->
        <!-- 根元素 -->
        <!-- 导航的元素 -->
        <div class="tabList">
            <div class="list">
                <router-link to="/hangzhou">杭州</router-link>
            </div>
            <div class="list">
                <!-- 跳转的子路由
                    父路由的path+/path(在子路由不加/的情况下)
                 -->
                <router-link to="/hospital">hospital</router-link>
            </div>
            <div class="list">
                <router-link to="/xinping">xinpingxian</router-link>
            </div>
        </div>
        <div class="content">
            <router-view />
        </div>
    </div>
</template>

<script>
    // 当前组件的js 写在这里
    // 组件的参数
    // let news = {
    //     // 不需要再绑定template  因为默认绑定当前文件
    //     // template:'',
    //     // 数据
    //     data(){
    //         return {

    //         }
    //     },
    //     // 方法
    //     methods: {

    //     },
    //     // 计算属性
    //     computed: {

    //     },
    //     // 过滤器
    //     filters: {

    //     },
    //     // 侦听器
    //     watch: {

    //     },
    //     // 生命周期
    //     beforeCreate(){},
    //     created(){},
    //     beforeMount(){},
    //     mounted(){},
    //     beforeUpdate(){},
    //     updted(){},

    // }

    // 导出组件参数
    // export default news

    // 推荐写法
    export default {
        // 不需要再绑定template  因为默认绑定当前文件
        // template:'',
        // 数据
        data(){
            return {

            }
        },
        // 方法
        methods: {

        },
        // 计算属性
        computed: {

        },
        // 过滤器
        filters: {

        },
        // 侦听器
        watch: {

        },
        // 生命周期
        beforeCreate(){},
        created(){},
        beforeMount(){},
        mounted(){},
        beforeUpdate(){},
        updted(){},

    }
</script>

<style lang="scss" scoped>

.news{
    width: 500px;
    height: 300px;
    display: flex;
}

.tabList{
    width: 15%;
    height: 300px;
    .list{
        text-align: center;
        height: 45px;
        line-height: 45px;
        border-bottom: 1px solid #999;
    }
}

.content{
    width: 85%;
    height: 300px;
    box-sizing: border-box;
    border-left: 1px solid #999;
}
// h1{
//     color:red;
//     span{
//         font-size:16px;
//     }
// }
/* 
    每一个组件都有相对应的 css样式，
    想对应的样式写在 响应文件的style标签下

    lang="scss"
    使用sass/scss 的css预编译处理器

    scoped 样式只在当前的组件中生效 
    当前组件的样式和其他的组件不冲突
*/
</style>
